<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="./css/bootstrap.css" rel="stylesheet"/>
    <link th:href="@{/css/bootstrap-theme.css}" rel="stylesheet"/>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
</head>
<body>
<div class="container">
    <div class = "d-flex justify-content-center">
        <div class="card float-right" style="width: 45rem;margin-top: 20%;float: right">
            <div class="card-body">
                <form action="" method="post" onsubmit="return false" id="loginForm">
                    <div class="form-group row">
                        <label for="inputEmail3" class="col-sm-2 col-form-label">账号：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputEmail3" name = "loginID" placeholder="登录名/邮箱/手机号">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputPassword3" class="col-sm-2 col-form-label">密码：</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputPassword3" name="password">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-10">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="gridCheck1" name="rememberMe">
                                <label class="form-check-label" for="gridCheck1">
                                    记住我
                                </label>
                                <a href="javascript:void(0)" class="card-link" style="margin-left: 15px;" onclick="findPasswd()">忘记密码？</a>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-10">
                            <button type="submit" class="btn btn-primary">Sign in</button>
                            <button class="btn btn-secondary" onclick="register()">Sign up</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">var ctx = [[@{/}]];</script>
<script th:src="@{/js/jquery-3.4.1.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script th:inline="javascript">
    $(function () {
        $("#loginForm").submit(function (e) {
            $.ajax({
                type: "POST",
                url: ctx + "login",
                dataType: "JSON",
                data: $("#loginForm").serialize(),
                success: function (r) {
                    if (r.type == 'AUTH') {
                        location.href = ctx + "index";
                    }else {
                        location.href = ctx + "login";
                    }
                }
            });
        });
    });
    
    function register(id) {
        location.href = ctx + "user/register";
    }

    function findPasswd() {
        window.open("http://127.0.0.1:8080/share/user/findPasswd", "_blank");
    }
</script>
</body>
</html>